<!DOCTYPE html>
<html>
<head>
    <title>Parallel Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Font Settings ---
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        const mainCharFont = "bold 44px 'Times New Roman', serif";
        const subCharFont = "bold 30px 'Times New Roman', serif";
        const vBatMainFont = "bold 44px 'Times New Roman', serif";
        const vBatSubFont = "bold 30px 'Times New Roman', serif";

        // --- Circuit Geometry ---
        const yTop = 80;
        const yBottom = 320;
        const xLeft = 120;
        const xRight = 550;
        
        // Battery position and dimensions
        const xBat = xLeft;
        const yBatCenter = (yTop + yBottom) / 2;
        const yBatPos = yBatCenter - 15;
        const yBatNeg = yBatCenter + 15;
        const batPosLength = 60;
        const batNegLength = 30;

        // Resistor positions and dimensions
        const resWidth = 50;
        const resHeight = 120;
        const yResTop = yTop + (yBottom - yTop - resHeight) / 2;
        const yResBottom = yResTop + resHeight;
        const xR1 = 240;
        const xR2 = 360;
        const xR3 = 480;

        // --- Drawing the Circuit ---
        
        // Start a new path for all circuit lines
        ctx.beginPath();

        // Top and bottom main wires
        ctx.moveTo(xLeft, yTop);
        ctx.lineTo(xRight, yTop);
        ctx.moveTo(xLeft, yBottom);
        ctx.lineTo(xRight, yBottom);

        // Left wire with battery
        ctx.moveTo(xBat, yTop);
        ctx.lineTo(xBat, yBatPos); // Wire to positive terminal
        ctx.moveTo(xBat - batPosLength / 2, yBatPos);
        ctx.lineTo(xBat + batPosLength / 2, yBatPos); // Positive terminal line
        ctx.moveTo(xBat - batNegLength / 2, yBatNeg);
        ctx.lineTo(xBat + batNegLength / 2, yBatNeg); // Negative terminal line
        ctx.moveTo(xBat, yBatNeg);
        ctx.lineTo(xBat, yBottom); // Wire from negative terminal

        // Resistor 1 branch
        ctx.moveTo(xR1, yTop);
        ctx.lineTo(xR1, yResTop); // Top lead
        ctx.rect(xR1 - resWidth / 2, yResTop, resWidth, resHeight); // Resistor box
        ctx.moveTo(xR1, yResBottom);
        ctx.lineTo(xR1, yBottom); // Bottom lead

        // Resistor 2 branch
        ctx.moveTo(xR2, yTop);
        ctx.lineTo(xR2, yResTop);
        ctx.rect(xR2 - resWidth / 2, yResTop, resWidth, resHeight);
        ctx.moveTo(xR2, yResBottom);
        ctx.lineTo(xR2, yBottom);

        // Resistor 3 branch
        ctx.moveTo(xR3, yTop);
        ctx.lineTo(xR3, yResTop);
        ctx.rect(xR3 - resWidth / 2, yResTop, resWidth, resHeight);
        ctx.moveTo(xR3, yResBottom);
        ctx.lineTo(xR3, yBottom);
        
        // Stroke all defined paths (wires and resistor boxes)
        ctx.stroke();

        // --- Drawing Labels ---
        
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const yResCenter = yResTop + resHeight / 2;

        // Label for R1
        ctx.font = mainCharFont;
        ctx.fillText('R', xR1 - 5, yResCenter);
        ctx.font = subCharFont;
        ctx.fillText('1', xR1 + 18, yResCenter + 12);
        
        // Label for R2
        ctx.font = mainCharFont;
        ctx.fillText('R', xR2 - 5, yResCenter);
        ctx.font = subCharFont;
        ctx.fillText('2', xR2 + 18, yResCenter + 12);

        // Label for R3
        ctx.font = mainCharFont;
        ctx.fillText('R', xR3 - 5, yResCenter);
        ctx.font = subCharFont;
        ctx.fillText('3', xR3 + 18, yResCenter + 12);

        // Label for V_bat
        ctx.textAlign = 'left';
        ctx.font = vBatMainFont;
        ctx.fillText('V', xLeft - 80, yBatCenter);
        ctx.font = vBatSubFont;
        ctx.fillText('bat', xLeft - 60, yBatCenter + 15);

    </script>
</body>
</html>